<template>
  <div>
    <div class="page-search" style="position: relative" v-show="showSearch">
      <div ref="form-ref" class="page-search-form">
        <div ref="contanner" :style="{ '--item-width': computedItemWidth }">
          <slot name="form"></slot>
        </div>
      </div>
      <section v-if="!hasScrollX" style="position: absolute; right: 0; top: 0">
        <el-button type="primary" :size="buttonSize" icon="el-icon-search" @click="handleQuery">
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" :size="buttonSize" @click="resetQuery">
          {{ $t('重置') }}
        </el-button>
      </section>
    </div>
    <div class="page-actions">
      <div v-if="hasScrollX && showSearch" class="mb10">
        <el-button type="primary" :size="buttonSize" icon="el-icon-search" @click="handleQuery">
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" :size="buttonSize" @click="resetQuery">
          {{ $t('重置') }}
        </el-button>
      </div>
      <div style="text-align: right; display: flex; width: 100%; justify-content: space-between" class="mb8">
        <div class="page-actions-btns">
          <slot name="actions" style="height: 25px; margin: 0; padding: 0"></slot>
        </div>
        <div style="display: flex; align-items: center">
          <div class="pagination-header">
            <slot name="pagination"></slot>
          </div>
          <div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="showSearch ? '隐藏搜索' : '显示搜索'"
              placement="top">
              <el-button :size="buttonSize" circle icon="el-icon-search" @click="toggleSearch()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button :size="buttonSize" circle icon="el-icon-refresh" @click="getList()" />
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from '@/utils'

export default {
  name: 'PageSearch',
  props: {
    showSearch: {
      type: Boolean,
      required: true,
    },
    getList: {
      type: Function,
      required: true,
    },
    handleQuery: {
      type: Function,
      required: true,
    },
    resetQuery: {
      type: Function,
      required: true,
    },
    itemWidth: {
      type: Number,
      default: () => 240,
    },
    buttonSize: {
      type: String,
      default: () => 'mini',
    },
  },
  watch: {
    showSearch: function (newValue) {
      if (newValue) {
        this.addEventListener()
      }
    },
  },
  computed: {
    computedItemWidth() {
      return `${this.itemWidth}px`
    },
  },
  mounted() {
    window.addEventListener(
      'resize',
      debounce(() => {
        if (this.showSearch) {
          this.addEventListener()
        }
      }, 100),
    )
  },
  data() {
    return {
      /**是否有横向滚动条 */
      hasScrollX: false,
    }
  },
  methods: {
    addEventListener() {
      this.$nextTick(() => {
        try {
          // 选择需要监听的元素
          const el = this.$refs['form-ref']
          // 获取元素的初始宽度+右侧按钮宽度
          const seachWidth = this.$refs['contanner'].clientWidth + 156
          if (el.scrollWidth > el.clientWidth || seachWidth > el.clientWidth) {
            this.hasScrollX = true
          } else {
            this.hasScrollX = false
          }
          // console.log(this.hasScrollX)
        } catch (error) {
          console.log(` error==>`, error)
        }
      })
    },
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch)
    },
  },
}
</script>
<style lang="scss">
.page-search {
  display: flex;
  position: relative;
  justify-content: space-between;
  &-form {
    flex: 1;
    overflow: auto;
    display: flex;
    form {
      .el-row {
        display: flex;
        & > div {
          margin-right: 10px;
        }
        .el-form-item {
          .el-form-item__content {
            .vue-treeselect,
            .el-date-editor,
            .el-select,
            .el-input {
              // width: 240px;
              width: var(--item-width);
            }
          }
        }
      }
    }
  }

  section {
    text-align: right;
    display: flex;
    align-items: end;
    button {
      // padding: 6px 10px;
      // font-size: 13px;
      // margin-bottom: 18px;
    }
  }
}
.page-actions {
  // margin-bottom: 10px;
  margin-top: 10px;
  &-btns {
    display: flex;
    align-items: center;
  }
}
.pagination-header {
  height: 100% !important;
  & > .pagination-container {
    padding: 0 !important;
    height: 100% !important;
    margin: 0 40px 0 0 !important;
  }
}
</style>
